<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天花板级别电商组件界面</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/weui/2.5.4/style/weui.min.css" 
    rel="stylesheet">
    <!-- 通用业务样式 -->
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/mark.css">
</head>
<>
    <!-- 选择了一个好用的框架weui
        70%不用做了，复用   -->
    <!-- weui-mark 影视商品组件 -->
    <div class="page">
        <div class="page__hd">
            <div class="weui-flex head-con">
                <div class="weui-flex__item weui-flex__item_left">
                    <div class="placeholder">
                        <a href="">
                            <span class="icon icon-109"></span>
                        </a>
                    </div>
                </div>
                <div class="weui-flex__item"><div class="placeholder">产品</div></div>
                <div class="weui-flex__item weui-flex__item_right">
                    <div class="placeholder">
                        <a href="">
                            <span class="icon icon-40"></span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="page__db">
            <ul class="weui-mark">
                <li>
                    <a href="product_datail.html">
                        <div class="weui-mark__img"
                            style="background-image: url('https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center');">
                            <!-- <img src="https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center" alt=""> -->
                        </div>
                        <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式
                        全栈 通用样式  bg-green bg-yellow bg-blue -->
                        <div class="weui-mark__rt bg-green">免费</div>
                        <div class="weui-mark__lb">更新到101集</div>
                        <div class="weui-mark__vip">
                            <span class="weui-mark__lt bg-green">自制剧</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="product_datail.html">
                        <div class="weui-mark__img" 
                        style="background-image: url('https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center');">
                            <!-- <img src="https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center" alt=""> -->
                        </div>
                        <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式
                        全栈 通用样式  bg-green bg-yellow bg-blue -->
                        <div class="weui-mark__rt bg-green">免费</div>
                        <div class="weui-mark__lb">更新到101集</div>
                        <div class="weui-mark__vip">
                            <span class="weui-mark__lt bg-green">自制剧</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="product_datail.html">
                        <div class="weui-mark__img" 
                        style="background-image: url('https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center');">
                            <!-- <img src="https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center" alt=""> -->
                        </div>
                        <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式
                        全栈 通用样式  bg-green bg-yellow bg-blue -->
                        <div class="weui-mark__rt bg-green">免费</div>
                        <div class="weui-mark__lb">更新到101集</div>
                        <div class="weui-mark__vip">
                            <span class="weui-mark__lt bg-green">自制剧</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="product_datail.html">
                        <div class="weui-mark__img" 
                        style="background-image: url('https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center');">
                            <!-- <img src="https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center" alt=""> -->
                        </div>
                        <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式
                        全栈 通用样式  bg-green bg-yellow bg-blue -->
                        <div class="weui-mark__rt bg-green">免费</div>
                        <div class="weui-mark__lb">更新到101集</div>
                        <div class="weui-mark__vip">
                            <span class="weui-mark__lt bg-green">自制剧</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="product_datail.html">
                        <div class="weui-mark__img" 
                        style="background-image: url('https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center');">
                            <!-- <img src="https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center" alt=""> -->
                        </div>
                        <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式
                        全栈 通用样式  bg-green bg-yellow bg-blue -->
                        <div class="weui-mark__rt bg-green">免费</div>
                        <div class="weui-mark__lb">更新到101集</div>
                        <div class="weui-mark__vip">
                            <span class="weui-mark__lt bg-green">自制剧</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="product_datail.html">
                        <div class="weui-mark__img" 
                        style="background-image: url('https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center');">
                            <!-- <img src="https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center" alt=""> -->
                        </div>
                        <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式
                        全栈 通用样式  bg-green bg-yellow bg-blue -->
                        <div class="weui-mark__rt bg-green">免费</div>
                        <div class="weui-mark__lb">更新到101集</div>
                        <div class="weui-mark__vip">
                            <span class="weui-mark__lt bg-green">自制剧</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="product_datail.html">
                        <div class="weui-mark__img" 
                        style="background-image: url('https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center');">
                            <!-- <img src="https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center" alt=""> -->
                        </div>
                        <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式
                        全栈 通用样式  bg-green bg-yellow bg-blue -->
                        <div class="weui-mark__rt bg-green">免费</div>
                        <div class="weui-mark__lb">更新到101集</div>
                        <div class="weui-mark__vip">
                            <span class="weui-mark__lt bg-green">自制剧</span>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="product_datail.html">
                        <div class="weui-mark__img" 
                        style="background-image: url('https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center');">
                            <!-- <img src="https://img.36krcdn.com/20220415/v2_409c207af79647c1926802e85141907a_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center" alt=""> -->
                        </div>
                        <!-- weui-mark__rt 右上角标签在组件中的作用，组件样式
                        全栈 通用样式  bg-green bg-yellow bg-blue -->
                        <div class="weui-mark__rt bg-green">免费</div>
                        <div class="weui-mark__lb">更新到101集</div>
                        <div class="weui-mark__vip">
                            <span class="weui-mark__lt bg-green">自制剧</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="page__ft">
        <div role="tablist" aria-label="选项卡标题" class="weui-tabbar">
            <div id="tab1" role="tab" aria-labelledby="t1_title" aria-describedby="t1_tips" aria-selected="true" aria-controls="panel1" class="weui-tabbar__item " wah-hotarea="click">
                <i class="icon icon-27 f27"></i>
                <p id="t1_title" aria-hidden="true" class="weui-tabbar__label">微信</p>
            </div>
            <div id="tab2" role="tab" aria-labelledby="t2_title" aria-selected="false" aria-controls="panel2" class="weui-tabbar__item weui-bar__item_on" wah-hotarea="click">
                <div id="t1_tips" aria-hidden="true" style="display: inline-block; position: relative;">
                    <i class="icon icon-28 f27"></i>
                    <span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span>
                    <p aria-hidden="true" id="t2_title" class="weui-tabbar__label">通讯录</p>
                    </div>
            </div>
            <div id="tab3" role="tab" aria-labelledby="t3_title" aria-describedby="t3_tips" aria-selected="false" aria-controls="panel3" class="weui-tabbar__item" wah-hotarea="click">
                <div id="t3_tips" aria-hidden="true" style="display: inline-block; position: relative;">
                    <i class="icon icon-29 f27"></i>
                    <span class="weui-badge weui-badge_dot" role="img" alt="new" style="position: absolute; top: 0; right: -6px;"></span>
                </div>
                <p id="t3_title" aria-hidden="true" class="weui-tabbar__label">发现</p>
            </div>
            <div id="tab4" role="tab" aria-labelledby="t4_title" aria-selected="false" aria-controls="panel4" class="weui-tabbar__item" wah-hotarea="click">
                <i class="icon icon-30 f27"></i>
                <p class="weui-tabbar__label" aria-hidden="true" id="t4_title">我</p>
            </div>
        </div>
    </div>
</div>
    
    <script>
        // 我们写完代码，未来发布的时候也要压缩
    </script>
</body>
</html>